<template>
  <div class="my-container">
    <van-cell-group class="my-info" v-if="user">
      <van-cell center class="base-info" :border="false">
        <van-image
          slot="icon"
          width="66"
          height="66"
          round
          fit="cover"
          :src="currentUser.photo"
          class="avatar"
        />
        <div slot="title" class="name">{{ currentUser.name }}</div>
        <van-button to="user/profile" class="update-btn" size="small" round
          >编辑资料</van-button
        >
      </van-cell>
      <van-grid :border="false" class="data-info">
        <van-grid-item>
          <div slot="text">
            <div class="span">{{ currentUser.art_count }}</div>
            <div class="text">头条</div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div slot="text">
            <div class="span">{{ currentUser.follow_count }}</div>
            <div class="text">关注</div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div slot="text">
            <div class="span">{{ currentUser.fans_count }}</div>
            <div class="text">粉丝</div>
          </div>
        </van-grid-item>
        <van-grid-item>
          <div slot="text">
            <div class="span">{{ currentUser.like_count }}</div>
            <div class="text">获赞</div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-cell-group>

    <div class="not-login" v-else>
      <img src="./phone.png" @click="toLogin" />
      <span @click="toLogin">登录 / 注册</span>
    </div>

    <van-grid :column-num="2" class="nav-grid">
      <van-grid-item
        icon-prefix="toutiao"
        icon="shoucang"
        text="收 藏"
        class="nav-grid-collection"
      />
      <van-grid-item
        icon-prefix="toutiao"
        icon="lishi"
        text="历 史"
        class="nav-grid-histroy"
      />
    </van-grid>

    <van-cell title="消息通知" is-link to="" class="cell-link" />
    <van-cell title="小智同学" is-link to="/user/chat" class="cell-link" />
    <van-cell
      class="logout"
      title="退出登录"
      to=""
      v-if="user"
      @click="onLogout"
    />
  </div>
</template>

<script>
import { getCurrentUser } from "@/api/user";
import { mapState } from "vuex";
export default {
  name: "My",
  data() {
    return {
      currentUser: {},
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 加载当前用户信息
    async loadCurrentUser() {
      const result = await getCurrentUser();
      this.currentUser = result.data.data;
    },
    // 点击退出登录
    onLogout() {
      this.$dialog
        .confirm({
          title: "退出提示",
          message: "确认退出吗",
        })
        .then(
          () => {
            // 用户点击确认
            this.$store.dispatch("setUser", null);
          },
          () => {
            // 用户点击取消
          }
        );
    },
    // 点击登录/注册
    toLogin() {
      this.$router.push({
        name: "login",
        query: {
          redirect: "/my",
        },
      });
    },
  },
  created() {
    this.loadCurrentUser();
  },
};
</script>

<style scoped lang="less">
.my-container {
  .my-info {
    background: url("./banner.png") no-repeat;
    background-size: cover;
    .base-info {
      box-sizing: border-box;
      background-color: unset;
      height: 135px;
      padding-top: 57px;
      .avatar {
        box-sizing: border-box;
        border: 1px solid #fff;
        margin-right: 11px;
      }
      .name {
        color: #fff;
      }
      .update-btn {
        line-height: 14px;
        font-size: 10px;
        height: 16px;
        color: #666;
      }
    }
    .data-info {
      box-sizing: border-box;
      height: 65px;
      font-size: 11px;
      color: #fff;
      text-align: center;
      .span {
        font-size: 18px;
      }
    }
    /deep/.van-grid-item__content {
      background-color: unset;
    }
  }

  .not-login {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("./banner.png") no-repeat;
    background-size: cover;
    height: 200px;
    padding-top: 73px;
    img {
      height: 66px;
      width: 66px;
      margin-bottom: 4px;
    }
    span {
      font-size: 14px;
      color: #ecf3fe;
    }
  }

  .nav-grid {
    /deep/.van-grid-item__icon {
      font-size: 23px;
    }

    .nav-grid-collection {
      color: #eb5253;
    }

    .nav-grid-histroy {
      color: #ffb95d;
    }

    /deep/.van-grid-item__text {
      font-size: 14px;
      color: #333;
    }
  }

  .cell-link {
    height: 47px;
    font-size: 15px;
  }

  .logout {
    height: 67px;

    .van-cell__title {
      font-size: 15px;
      color: #eb5253;
      line-height: 47px;
      text-align: center;
    }
  }
}
</style>
